<%-- 
    Document   : workspace
    Created on : Jan 7, 2012, 3:34:51 PM
    Author     : TrieuNX
--%>
<%@include file="prelude.jsp" %>
<script type="text/javascript" >
    $(document).ready(function() {

        $(function() {
            $("#startDateCreated").datepicker( {
                showOn: 'button',
                buttonImage: '../res/images/calendar.gif',
                buttonImageOnly: true,
                dateFormat: 'yy-mm-dd' //ISO 8601
            });
        });
        $(function() {
            $("#endDateCreated").datepicker( {
                showOn: 'button',
                buttonImage: '../res/images/calendar.gif',
                buttonImageOnly: true,
                dateFormat: 'yy-mm-dd' //ISO 8601
            });
        });
        
    });
</script>
<div id="main">
    <%@include file="manageCustomerHeader.jsp" %>
    <div id="middle" >
        <%@include file="manageCustomerMenu.jsp" %>
        <form action="/opt/manageCustomer.htm" name="manage_customer_form" > 
            <div id="center-column">
                <div class="top-bar">
                    <!-- <a href="#" class="button">ADD NEW </a>-->
                    <h1>Contents</h1>
                    <div class="breadcrumbs"><a href="#">Administrator</a> / <a href="#">Manage Customer Account</a></div>
                </div><br />
                <div class="select-bar">                
                    <table>
                        <tr>
                            <td>Email</td>
                            <td> <input type="text" name="email"/>  
                            </td>
                        </tr>
                        <tr>
                            <td>First Name</td>
                            <td><input type="text" name="firstName"/></td>
                        </tr>
                        <tr>
                            <td>Last Name</td>
                            <td><input type="text" name="lastName"/></td>
                        </tr> 
                        <tr>
                            <td> Start Date Created</td>
                            <td><input type="text" id="startDateCreated" maxLength="16" name="startDateCreated" readonly="true" size="16" value="${requestScope['startDateCreated']}" /></td>
                        </tr>
                        <tr>
                            <td> End Date Created</td>
                            <td><input type="text" id="endDateCreated" maxLength="16" name="endDateCreated" readonly="true" size="16" value="${requestScope['endDateCreated']}"/></td>
                        </tr>
                        <tr>
                            <td>City</td>
                            <td><input type="text" name="city"/></td>
                        </tr>
                        <tr>
                            <td>Country</td>

                            <td>
                                <select name="country">
                                    <option value="">All</option>
                                    <option value="en">England</option>
                                    <option value="vn">Vietnam</option>

                                </select>
                            </td>                
                        </tr>
                    </table>

                    <label>
                        <input type="submit" name="Submit" value="Search" />
                    </label>
                </div>
                <div class="message">
                    ${param['message']}
                </div>
               
                <div class="table">
                    <img src="../img/bg-th-left.gif" width="8" height="7" alt="" class="left" />
                    <img src="../img/bg-th-right.gif" width="7" height="7" alt="" class="right" />
                    <table class="listing" cellpadding="0" cellspacing="0">
                        <tr>
                            <th>Full Name</th>
                            <th>Email</th>
                            <th>Number</th>
                            <th>City</th>
                            <th>Country</th>
                            <th>Active</th>
                            <th>Suspended</th>
                            <th class="last">Action</th>
                        </tr>
                        <c:if test="${requestScope['customers'] != null}">
                            <c:forEach items="${requestScope['customers']}" var="customer">
                                <tr >
                                    <td style="text-align: center">${customer.firstName}&nbsp; ${customer.lastName}</td>
                                    <td style="text-align: center">${customer.email}</td>
                                    <td style="text-align: center">${customer.phoneNumber}</td>
                                    <td style="text-align: center">${customer.city}</td>
                                    <td style="text-align: center">${customer.countryCode}</td>
                                    <td style="text-align: center">${customer.active}</td>
                                    <td style="text-align: center">${customer.suspended}</td>

                                    <td class="last">
                                        <a href="/opt/suspendCustomer.htm?cus=${customer.email}" onclick="return confirm('Do you want to suspend customer : ${customer.email}')" style="text-decoration: underline">Suspend</a>
                                        &nbsp;|&nbsp;
                                        <a href="/opt/deActiveCustomer.htm?cus=${customer.email}" onclick="return confirm('Do you want to deactive customer : ${customer.email}')" style="text-decoration: underline">DeActive</a> 
                                        &nbsp;|&nbsp;
                                        <a href="/opt/editCustomer.htm?cus=${customer.email}" onclick="return confirm('Do you want to edit customer : ${customer.email}')" style="text-decoration: underline">Edit</a>                                        
                                    </td>
                                </tr>
                            </c:forEach>
                        </c:if>
                    </table>
                    <div class="select">
                        <strong>Other Pages: </strong>
                        <s:select name="pageNumber" list="pages" listKey="id" listValue="value" onselect="document.manage_customer_form.submit()" ></s:select>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <%@include file="footer.jsp" %>
</div>